@import (reference) "@/styles/variables.less";

.settings-page {
  .settings-page__header {
    padding-bottom: @spacing-xl;
  border-bottom: 1px solid @gray-200;

    .settings-page__title {
      font-size: @font-size-3xl;
  font-weight: 700;
  color: @gray-900;
    }

    .settings-page__description {
      color: @gray-600;
  margin-top: @spacing-sm;
    }
  }

  .settings-page__content {
    & > * + * {
    margin-top: @spacing-2xl;
  }

    .settings-page__nav {
      .card();
  padding: @spacing-lg;

      .settings-page__nav-list {
        & > * + * {
    margin-top: @spacing-sm;
  }
      }

      .settings-page__nav-item {
        display: flex;
  align-items: center;
  justify-content: space-between;
  padding: @spacing-md;
  border-radius: @border-radius-lg;
  transition: color @transition-normal;

        &:hover {
          background: @gray-50;
        }

        &.settings-page__nav-item--active {
          background: @blue-50;
  color: @blue-700;
        }

        .settings-page__nav-item-info {
          display: flex;
  align-items: center;
  gap: @spacing-md;

          .settings-page__nav-item-icon {
            width: 20px;
  height: 20px;
          }

          .settings-page__nav-item-text {
            font-weight: 500;
          }
        }

        .settings-page__nav-item-indicator {
          width: 8px;
  height: 8px;
  background: @blue-500;
  border-radius: 9999px;
        }
      }
    }

    .settings-page__section {
      .card();
  padding: @spacing-xl;

      .settings-page__section-header {
        margin-bottom: @spacing-xl;

        .settings-page__section-title {
          font-size: @font-size-xl;
  font-weight: 600;
  color: @gray-900;
        }

        .settings-page__section-description {
          color: @gray-600;
  margin-top: @spacing-xs;
        }
      }

      .settings-page__section-content {
        & > * + * {
    margin-top: @spacing-xl;
  }
      }

      .settings-page__setting-group {
        & > * + * {
    margin-top: @spacing-lg;
  }

        .settings-page__setting-label {
          display: block;
  font-size: @font-size-sm;
  font-weight: 500;
  color: @gray-700;
        }

        .settings-page__setting-controls {
          & > * + * {
    margin-top: @spacing-md;
  }
        }

        .settings-page__setting-item {
          display: flex;
  align-items: center;
  justify-content: space-between;

          .settings-page__setting-info {
            flex: 1;

            .settings-page__setting-name {
              font-weight: 500;
  color: @gray-900;
            }

            .settings-page__setting-description {
              font-size: @font-size-sm;
  color: @gray-600;
            }
          }

          .settings-page__setting-action {
            display: flex;
  align-items: center;
  gap: @spacing-md;
          }
        }

        .settings-page__setting-input {
          width: 100%;
  padding: @spacing-sm;
  border: 1px solid @gray-300;
  border-radius: @border-radius-lg;
  
  &:focus {
    outline: none;
    border-color: @blue-500;
    box-shadow: 0 0 0 2px fade(@blue-500, 20%);
  }
        }

        .settings-page__setting-select {
          width: 100%;
  padding: @spacing-sm;
  border: 1px solid @gray-300;
  border-radius: @border-radius-lg;
  
  &:focus {
    outline: none;
    border-color: @blue-500;
    box-shadow: 0 0 0 2px fade(@blue-500, 20%);
  }
        }

        .settings-page__setting-checkbox {
          display: flex;
  align-items: center;
  gap: @spacing-sm;

          input {
            border-radius: @border-radius;
  border-color: @gray-300;
  color: @blue-600;
  
  &:focus {
    box-shadow: 0 0 0 2px fade(@blue-500, 20%);
  }
          }

          span {
            font-size: @font-size-sm;
  color: @gray-700;
          }
        }
      }

      .settings-page__action-buttons {
        display: flex;
  align-items: center;
  gap: @spacing-md;

        .settings-page__action-button {
          .btn();

          &.settings-page__action-button--primary {
            .btn-primary();
          }

          &.settings-page__action-button--secondary {
            .btn-outline();
          }
        }
      }
    }

    .settings-page__welcome-card {
      .card();
  padding: @spacing-3xl;
  text-align: center;
  transition: all @transition-slow;

      &:hover {
        transform: scale(1.02);
  box-shadow: @shadow-lg;
      }

      .settings-page__welcome-icon {
        width: 64px;
  height: 64px;
  color: @gray-400;
  margin: 0 auto @spacing-xl auto;
      }

      .settings-page__welcome-title {
        font-size: @font-size-xl;
  font-weight: 600;
  color: @gray-900;
  margin-bottom: @spacing-lg;
      }

      .settings-page__welcome-text {
        color: @gray-600;
      }
    }
  }

  .settings-page__layout {
    display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: @spacing-2xl;
  
  @media (min-width: @screen-lg) {
    grid-template-columns: repeat(4, 1fr);
  }

    .settings-page__sidebar {
      @media (min-width: @screen-lg) {
    grid-column: span 1;
  }
    }

    .settings-page__main {
      @media (min-width: @screen-lg) {
    grid-column: span 3;
  }
    }
  }

  // 响应式设计
  @media (max-width: @screen-md) {
    .settings-page__layout {
      grid-template-columns: repeat(1, 1fr);

      .settings-page__sidebar {
        order: 2;
      }

      .settings-page__main {
        order: 1;
      }
    }
  }

  @media (max-width: @screen-sm) {
    .settings-page__header {
      text-align: center;
    }

    .settings-page__content {
      .settings-page__section {
        .settings-page__action-buttons {
          display: flex;
  flex-direction: column;
  & > * + * {
    margin-top: @spacing-md;
  }

          .settings-page__action-button {
            width: 100%;
          }
        }
      }
    }
  }
}